<template>
    <div>
        <div class="head">
            <h1>人博会人才供求信息云图</h1>
            <div class="time" id="showTime">
                {{ date }} {{ moreTime }}
            </div>
        </div>
        <div class="mainbox" :style="conf.dynamicStyle">
            <ul class="clearfix">
                <li>
                    <div class="boxall" style="height: calc(58% - -10px)">
                        <div class="alltitle">
                            全省引才单位需求汇总
                        </div>
                        <div ref="mapRef" style="width: 100%; height: calc(100% - 30px);"></div>
                    </div>
                    <div class="boxall" style="height: calc(42%)">
                        <div class="alltitle">
                            引才单位性质
                        </div>
                        <div ref="refUnit" style="width: 100%; height: calc(100% - 40px);"></div>
                    </div>
                </li>
                <li>
                    <div class="boxall" style="height: calc(20% - .15rem)">
                        <ul class="row h100 clearfix">
                            <li class="col-6">
                                <div class="sqzs h100">
                                    <p>网站访问量统计</p>
                                    <h1><span>302568500</span>人次</h1>
                                </div>
                            </li>
                            <li class="col-6">
                                <ul class="row h100 clearfix">
                                    <li class="col-4">
                                        <div class="tit01">
                                            在线人数
                                        </div>
                                        <div ref="pe1" style="width: 100%; height: calc(100% - 30px);"></div>
                                    </li>
                                    <li class="col-4">
                                        <div class="tit01">
                                            注册人数
                                        </div>
                                        <div ref="pe2" style="width: 100%; height: calc(100% - 30px);"></div>
                                    </li>
                                    <li class="col-4">
                                        <div class="tit01">
                                            访问来源
                                        </div>
                                        <div ref="pe3" style="width: 100%; height: calc(100% - 30px);"></div>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <div class="boxall" style="height: calc(38% - .15rem)">
                        <div class="alltitle">
                            贵州省重点产业领域（六大产业基地）
                        </div>
                        <div ref="reFgzDemand" style="width: 100%; height: 80%;"></div>
                    </div>
                    <div class="boxall" style="height: calc(42% - .15rem)">
                        <div class="alltitle">
                            引才学历需求
                        </div>
                        <div ref="refIntroduceEducational" style="width: 100%; height: calc(100% - 40px);"></div>
                    </div>
                </li>
                <li>
                    <div class="boxall" style="height: calc(29% - .15rem)">
                        <div class="alltitle">
                            求职人才学历
                        </div>
                        <div ref="refSeekEmployment" style="width: 100%; height: calc(100% - 40px);"></div>
                    </div>
                    <div class="boxall" style="height: calc(29% - .15rem)">
                        <div class="alltitle">
                            求职人才简介投递
                        </div>
                        <div class="boxnav" id="">
                            <table border="0" cellspacing="0">
                                <tbody>
                                    <tr>
                                        <th>姓名</th>
                                        <th>学历</th>
                                        <th>专业</th>
                                        <th>年龄</th>
                                        <th>区域</th>
                                    </tr>
                                    <tr v-for="(item, index) in 5" :key="index">
                                        <th>张三</th>
                                        <td>本科</td>
                                        <td>软件开发</td>
                                        <td>22</td>
                                        <td>区域</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="boxall" style="height: calc(42% - .15rem)">
                        <div class="alltitle">
                            求职人才年龄
                        </div>
                        <div ref="refUnitNature" style="width: 100%; height: calc(80%);padding-left: 00px;">
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script name="loginIndex" lang="ts" setup>
import * as echarts from 'echarts';
import guizhou from '@/api/gz.json'
import { reactive, ref, Ref, onMounted, onBeforeUnmount } from 'vue'
const refUnit: Ref<HTMLDivElement | null> = ref(null);
const chartContainer: Ref<HTMLDivElement | null> = ref(null);
const pe1: Ref<HTMLDivElement | null> = ref(null);
const pe2: Ref<HTMLDivElement | null> = ref(null);
const pe3: Ref<HTMLDivElement | null> = ref(null);
const mapRef: Ref<HTMLDivElement | null> = ref(null);
const refIntroduceEducational: Ref<HTMLDivElement | null> = ref(null);
const refSeekEmployment: Ref<HTMLDivElement | null> = ref(null);
const reFgzDemand: Ref<HTMLDivElement | null> = ref(null);
const refUnitNature: Ref<HTMLDivElement | null> = ref(null);
let chartInstance: echarts.ECharts | null = null;

const conf = reactive({
    loading: false,
    screenHeight: window.innerHeight,
    dynamicStyle: {
        height: window.innerHeight - 140 + 'px',
        // 其他需要动态设置的样式
    },
    dataName: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
    dataValue: [5, 20, 36, 10, 10, 20],
    dataMap: {
        dataGDP: [],
        dataPI: [],
        dataSI: [],
        dataTI: [],
        dataEstate: [],
        dataFinancial: []
    },
    username: '',
    password: '',
    rootPwdModal: {
        show: false,
        data: {}
    }
})
const timer = ref()
const date = ref("")//年月日
const moreTime = ref("")//时分秒
//取消定时器
onBeforeUnmount(() => {
    clearInterval(timer.value) //清除定时器
})
onMounted(() => {
    //创建定时器1秒执行一次
    timer.value = setInterval(() => {
        formateDate()
    }, 1000)
    unitNature()
    accessStatistics()
    demand()
    summary()
    nature()
    introduceEducational()
    seekEmployment()
    pe01()
    pe02()
    pe03()
})
//获取当前时间
const formateDate = () => {
    const time = new Date()
    const year = time.getFullYear()
    const month = complement(time.getMonth() + 1)
    const day = complement(time.getDate())
    const hour = complement(time.getHours())
    const minute = complement(time.getMinutes())
    const second = complement(time.getSeconds())
    moreTime.value = `${hour}:${minute}:${second}`
    date.value = `${year}/${month}/${day}`
}
//当时间为个位数的时候，在数字前加0
const complement = (value: number): string => {
    return value < 10 ? `0${value}` : value.toString()
}
//人博会网站访问量统计
const accessStatistics = () => {
    if (chartContainer.value) {
        chartInstance = echarts.init(chartContainer.value);
        const option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: 'line'
                }
            ]
        };
        chartInstance.setOption(option);
    }
}
//贵州省重点产业领域引才需求(六大产业基地)
const demand = () => {
    if (reFgzDemand.value) {
        chartInstance = echarts.init(reFgzDemand.value);
        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
            },
            "grid": {
                "top": "20%",
                "right": "70",
                "bottom": "20",
                "left": "60",
            },
            legend: {
                data: ['引才单位数', '发布岗位数', '人才需求数', '简历投递数'],
                right: 'center',
                width: '100%',
                textStyle: {
                    color: "#fff"
                },
                itemWidth: 12,
                itemHeight: 10,
            },
            xAxis: [{
                "type": "category",
                data: ['产业1', '产业2', '产业3', '产业4'],
                axisLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)"
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.7)",
                        fontSize: '14',
                    },
                },

            },],
            yAxis: [{
                "type": "value",
                "name": "单位/人",
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false,

                },
                "axisLabel": {
                    "show": true,
                    fontSize: 14,
                    color: "rgba(255,255,255,.6)"

                },
                axisLine: {
                    min: 0,
                    max: 10,
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)'
                    }
                }, //左线色

            },
            {
                "type": "value",
                "name": "单位/人",
                "show": true,
                "axisLabel": {
                    "show": true,
                    fontSize: 14,
                    formatter: "{value}",
                    color: "rgba(255,255,255,.6)"
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)'
                    }
                }, //右线色
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)'
                    }
                }, //x轴线
            },
            ],
            series: [

                {
                    name: '引才单位数',
                    type: 'bar',
                    data: [300, 500, 1000, 1500],
                    "barWidth": "15%",
                    "itemStyle": {
                        "normal": {
                            barBorderRadius: 15,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#8bd46e'
                            }, {
                                offset: 1,
                                color: '#09bcb7'
                            }]),
                        }
                    },
                    "barGap": "0.2"
                },
                {
                    name: '发布岗位数',
                    type: 'bar',
                    data: [400, 600, 1200, 3000],
                    "barWidth": "15%",
                    "itemStyle": {
                        "normal": {
                            barBorderRadius: 15,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#248ff7'
                            }, {
                                offset: 1,
                                color: '#6851f1'
                            }]),
                        }
                    },
                    "barGap": "0.2"
                },
                {
                    name: '人才需求数',
                    type: 'line',
                    smooth: true,
                    "yAxisIndex": 1,
                    data: [1000, 2000, 3000, 4000, 5000, 6000, 7000],
                    lineStyle: {
                        normal: {
                            width: 2
                        },
                    },
                    "itemStyle": {
                        "normal": {
                            "color": "#3496f8",

                        }
                    },
                },
                {
                    name: '简历投递数',
                    type: 'line',
                    smooth: true,
                    "yAxisIndex": 1,
                    data: [1000, 500, 120, 150, 5000, 2500, 4000],
                    lineStyle: {
                        normal: {
                            width: 2
                        },
                    },
                    "itemStyle": {
                        "normal": {
                            "color": "#fbc30d",

                        }
                    },
                }
            ]
        };
        chartInstance.setOption(option);
    }
}
//全省引才单位需求汇总
const summary = () => {
    if (mapRef.value) {
        chartInstance = echarts.init(mapRef.value);
        echarts.registerMap('guizhou', guizhou);
        // 指定图表的配置项和数据
        const option = {
            // 提示浮窗
            tooltip: {
                trigger: 'item', // 触发类型，默认数据项触发，主要在地图等维度数据中使用
                formatter: function (params: { value: string; name: string; }) { // 自定义显示内容
                    console.log(params.value)
                    return params.name + ' : ' + params.value; // 假设数据格式为 [value, value, name]
                }
            },
            // 地图
            geo: {
                map: 'guizhou',
                roam: false,  // 是否开启平游或缩放
                label: {
                    normal: {
                        show: true,
                        textStyle: {
                            color: "#fff",
                        },
                    },
                    emphasis: {
                        textStyle: {
                            color: "#fff",
                        },
                    },
                },
                itemStyle: {
                    normal: {
                        borderColor: "rgba(147,235,248,1)",
                        borderWidth: 0,
                        areaColor: {
                            type: "radial",
                            x: 0.5,
                            y: 0.5,
                            r: 0.8,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: "rgba(50, 85, 209,0.6)" // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: "rgba(50, 85, 209,0.8)" // 100% 处的颜色
                                }
                            ],
                            globalCoord: false // 缺省为 false
                        },
                        shadowColor: "rgba(0, 0, 0, 2)",
                        shadowBlur: 10,
                        shadowOffsetX: 2,
                        shadowOffsetY: 2,
                    },
                    emphasis: {
                        areaColor: "#389BB7",
                        borderWidth: 0,
                    },
                },
            },
            series: [
                {
                    name: "数量",
                    type: "map",
                    mapType: 'guizhou',
                    zoom: 1.2,
                    data: [
                        { name: '贵阳市', value: [123] },
                        { name: '毕节市', value: [789] }
                    ],
                    geoIndex: 0,
                },
            ]
        };
        chartInstance.setOption(option);
    }
}
//引才单位性质
const nature = () => {
    if (refUnit.value) {
        chartInstance = echarts.init(refUnit.value);
        const option = {

            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                //          data: [ '字段2', '字段3'],
                right: 'center',
                top: 0,
                textStyle: {
                    color: "#fff"
                },
                itemWidth: 12,
                itemHeight: 10,
                // itemGap: 35
            },
            grid: {
                left: '0',
                right: '20',
                bottom: '0',
                top: '15%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['事业单位', '国有企业', '民营企业'] // 设置横坐标的文字
            },

            yAxis: {
                type: 'value',
                splitNumber: 4,
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(255,255,255,0.1)'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: 14,
                    }
                },
                axisLine: {
                    show: false
                },
            },

            series: [{
                //          name: '字段2',
                type: 'bar',
                stack: 'a',
                barWidth: '30',
                barGap: 0,
                itemStyle: {
                    normal: {
                        color: '#f5804d',
                        barBorderRadius: 0,
                    }
                },
                data: [48, 50, 56]
            }]
        };
        chartInstance.setOption(option);
    }
}
//引才学历需求
const introduceEducational = () => {
    if (refIntroduceEducational.value) {
        chartInstance = echarts.init(refIntroduceEducational.value);
        //指定图表的配置项和数据
        var data = [220, 182, 191, 234];
        var yMax = 500;
        var dataShadow = [];

        for (var i = 0; i < data.length; i++) {
            dataShadow.push(yMax);
        }
        const option = {

            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                //          data: [ '字段2', '字段3'],
                right: 'center',
                top: 0,
                textStyle: {
                    color: "#fff"
                },
                itemWidth: 12,
                itemHeight: 10,
                // itemGap: 35
            },
            grid: {
                left: '0',
                right: '20',
                bottom: '0',
                top: '15%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['博士', '硕士', '本科', '大专/高职'] // 设置横坐标的文字
            },

            yAxis: {
                type: 'value',
                splitNumber: 4,
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(255,255,255,0.1)'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: 14,
                    }
                },
                axisLine: {
                    show: false
                },
            },

            series: [{ // For shadow
                type: 'bar',
                itemStyle: {
                    color: 'rgba(0,0,0,0.05)'
                },
                barGap: '-100%',
                barCategoryGap: '40%',
                // data: dataShadow,
                // 设置柱子的固定宽度
                barWidth: '50',  // 或者具体的像素值，如 30
                // 或者设置最大宽度
                barMaxWidth: '30', // 单位是像素
                animation: false
            },
            {
                type: 'bar',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            { offset: 0, color: '#0efdff' },
                            { offset: 0.5, color: '#188df0' },
                            { offset: 1, color: '#188df0' }
                        ]
                    )
                },
                emphasis: {
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                { offset: 0, color: '#2378f7' },
                                { offset: 0.7, color: '#2378f7' },
                                { offset: 1, color: '#0efdff' }
                            ]
                        )
                    }
                },
                data: data
            }]
        };

        chartInstance.setOption(option);
    }
}
//求职人才学历
const seekEmployment = () => {
    if (refSeekEmployment.value) {
        chartInstance = echarts.init(refSeekEmployment.value);
        let time: any[] = ['博士', '硕士', '本科', '大专/高职']
        let descend: any[] = [15, 354, 568, 258] //数据
        const option = {
            animation: true, // 开启动画
            color: ['#80FFA5'],
            title: {
                // text: '单位 mb/s',
                link: '',
                textStyle: {
                    color: '#ffffff',
                    fontWeight: 'normal',
                    fontSize: 12,
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: []
            },
            toolbox: {
                show: false,//去掉下载图标
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: time,
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisTick: {
                        show: false
                    },
                    // splitNumber: 6,
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.1)'
                        }
                    },
                    axisLabel: {
                        formatter: "{value}", //%
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: 14,
                        },
                    },

                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.1)'
                        }
                    }
                }
            ],
            series: [
                {
                    name: '数据',
                    type: 'line',
                    stack: 'Total',
                    smooth: true,
                    lineStyle: {
                        width: 2,
                        color: '#79D1FF'
                    },
                    showSymbol: true,
                    areaStyle: {
                        opacity: 0.5,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: "#79D1FF" },
                            { offset: 0.5, color: "rgba(121,240,255,0.3)" },
                            { offset: 1, color: "rgba(121,240,255,0.1)" },
                        ]),
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: descend
                }
            ]
        };
        chartInstance.setOption(option);
    }
}
//求职人才年龄
const unitNature = () => {
    if (refUnitNature.value) {
        chartInstance = echarts.init(refUnitNature.value);
        const option = {
            title: {
                text: '22378',
                subtext: '总体',
                x: 'center',
                y: '40%',
                textStyle: {
                    color: '#fff',
                    fontSize: 22,
                    lineHeight: 10,
                },
                subtextStyle: {
                    color: '#90979c',
                    fontSize: 16,
                    lineHeight: 10,

                },
            },
            tooltip: {
                trigger: 'item',
                formatter: "{b} : {c} ({d}%)"
            },

            visualMap: {
                show: false,
                min: 500,
                max: 600,
                inRange: {
                    //colorLightness: [0, 1]
                }
            },
            series: [{
                name: '访问来源',
                type: 'pie',
                radius: ['50%', '70%'],
                center: ['50%', '50%'],
                color: ['rgb(131,249,103)', '#FBFE27', '#FE5050', '#1DB7E5'], //'#FBFE27','rgb(11,228,96)','#FE5050'
                data: [{
                    "value": 5245,
                    "name": "30以下"
                }, {
                    "value": 7812,
                    "name": "30-40"
                }, {
                    "value": 6734,
                    "name": "40-50"
                }, {
                    "value": 2587,
                    "name": "50以上"
                }].sort(function (a, b) {
                    return a.value - b.value
                }),
                roseType: 'radius',

                label: {
                    normal: {
                        formatter: ['{c|{c}人}', '{b|{b}}'].join('\n'),
                        rich: {
                            c: {
                                color: 'rgb(241,246,104)',
                                fontSize: 20,
                                fontWeight: 'bold',
                                lineHeight: 5
                            },
                            b: {
                                color: 'rgb(98,137,169)',
                                fontSize: 14,
                                height: 44
                            },
                        },
                    }
                },
                labelLine: {
                    normal: {
                        lineStyle: {
                            color: 'rgb(98,137,169)',
                        },
                        smooth: 0.2,
                        length: 10,
                        length2: 20,

                    }
                }
            }]
        };
        chartInstance.setOption(option);
    }
}
const pe01 = () => {
    if (pe1.value) {
        chartInstance = echarts.init(pe1.value);
        var txt = 81
        const option = {
            title: {
                text: txt + '%',
                x: 'center',
                y: 'center',
                textStyle: {
                    fontWeight: 'normal',
                    color: '#fff',
                    fontSize: '18'
                }
            },
            color: 'rgba(255,255,255,.3)',

            series: [{
                name: 'Line 1',
                type: 'pie',
                clockWise: true,
                radius: ['65%', '80%'],
                itemStyle: {
                    normal: {
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        }
                    }
                },
                hoverAnimation: false,
                data: [{
                    value: txt,
                    name: '已使用',
                    itemStyle: {
                        normal: {
                            color: '#eaff00',
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            }
                        }
                    }
                }, {
                    name: '未使用',
                    value: 100 - txt
                }]
            }]
        };
        chartInstance.setOption(option);
    }
}

const pe02 = () => {
    if (pe2.value) {
        chartInstance = echarts.init(pe2.value);
        var txt = 81
        const option = {
            title: {
                text: txt + '%',
                x: 'center',
                y: 'center',
                textStyle: {
                    fontWeight: 'normal',
                    color: '#fff',
                    fontSize: '18'
                }
            },
            color: 'rgba(255,255,255,.3)',

            series: [{
                name: 'Line 1',
                type: 'pie',
                clockWise: true,
                radius: ['65%', '80%'],
                itemStyle: {
                    normal: {
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        }
                    }
                },
                hoverAnimation: false,
                data: [{
                    value: txt,
                    name: '已使用',
                    itemStyle: {
                        normal: {
                            color: '#eaff00',
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            }
                        }
                    }
                }, {
                    name: '未使用',
                    value: 100 - txt
                }]
            }]
        };
        chartInstance.setOption(option);
    }
    return
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('pe02'));
    var txt = 17
    const option = {
        title: {
            text: txt + '%',
            x: 'center',
            y: 'center',
            textStyle: {
                fontWeight: 'normal',
                color: '#fff',
                fontSize: '18'
            }
        },
        color: 'rgba(255,255,255,.3)',

        series: [{
            name: 'Line 1',
            type: 'pie',
            clockWise: true,
            radius: ['65%', '80%'],
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    }
                }
            },
            hoverAnimation: false,
            data: [{
                value: txt,
                name: '已使用',
                itemStyle: {
                    normal: {
                        color: '#ea4d4d',
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        }
                    }
                }
            }, {
                name: '未使用',
                value: 100 - txt
            }]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

const pe03 = () => {
    if (pe3.value) {
        chartInstance = echarts.init(pe3.value);
        var txt = 81
        const option = {
            title: {
                text: txt + '%',
                x: 'center',
                y: 'center',
                textStyle: {
                    fontWeight: 'normal',
                    color: '#fff',
                    fontSize: '18'
                }
            },
            color: 'rgba(255,255,255,.3)',

            series: [{
                name: 'Line 1',
                type: 'pie',
                clockWise: true,
                radius: ['65%', '80%'],
                itemStyle: {
                    normal: {
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        }
                    }
                },
                hoverAnimation: false,
                data: [{
                    value: txt,
                    name: '已使用',
                    itemStyle: {
                        normal: {
                            color: '#eaff00',
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            }
                        }
                    }
                }, {
                    name: '未使用',
                    value: 100 - txt
                }]
            }]
        };
        chartInstance.setOption(option);
    }
    return
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('pe03'));
    var txt = 2
    const option = {
        title: {
            text: txt + '%',
            x: 'center',
            y: 'center',
            textStyle: {
                fontWeight: 'normal',
                color: '#fff',
                fontSize: '18'
            }
        },
        color: 'rgba(255,255,255,.3)',

        series: [{
            name: 'Line 1',
            type: 'pie',
            clockWise: true,
            radius: ['65%', '80%'],
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    }
                }
            },
            hoverAnimation: false,
            data: [{
                value: txt,
                name: '已使用',
                itemStyle: {
                    normal: {
                        color: '#395ee6',
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        }
                    }
                }
            }, {
                name: '未使用',
                value: 100 - txt
            }]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}


</script>
<style lang="scss" scoped></style>